import React, { useEffect, useState } from 'react'
import { Button, Space, Steps, Card, Typography, Modal } from "antd";
import { getActivityTypeCode,getCommissionStatus } from "@/utils/tools.js"
import { getOrderLogisticsDetail, expressageCompanySettingList } from '@/api/fundsManage/billList.js';
import { getDateTime2 } from '@/utils/getTimes'
import './style/style.scss'
const { Step } = Steps;
const { Paragraph } = Typography;

export default function componentName(props) {
  const data = props.orderInfo // 组件传参
  const [stepCurrentValue, setStepCurrentValue] = useState(null) //当前步骤
  const [stepData, setStepData] = useState([]) // 步骤数据
  const [logisticsModal, setLogisticsModal] = useState(false) //查看物流弹窗
  const [logisticsData, setLogisticsData] = useState([]) //物流详情
  const [courierCode, setCourierCode] = useState([]) //物流详情
  const [courierNo, setCourierNo] = useState([]) //物流详情
  const [options, setOptions] = useState([]) //快递公司
  useEffect(() => {
    getData()
    expressageCompanyData()
  }, [data])

  //快递公司数据处理
  const expressageCompanyData = async () => {
    await expressageCompanySettingList().then(res => {
      if (res.code === 0 && res.data) {
        let data = res.data.map(v => {
          return {
            value: v.expressageCompanyCode,
            label: v.expressageCompanyName
          }
        })
        setOptions(data)
      }
    })

  }
  //处理数据
  const getData = async () => {
    data.activityTypeCode = getActivityTypeCode(props.orderInfo.activityTypeCode) //订单类型
    // console.log(props.orderInfo);
    data.commissionStatus = getCommissionStatus(props.orderInfo.commissionStatus) //结算状态
    setStepCurrentValue(data.orderState)
    data.orderState !== '0' ? getFinishStep(data) : getOffStep(data)
  }
  // step交易完成进度数据处理
  const getFinishStep = (params) => {
    if (params.orderState !== '0') {
      let step = ''
      switch (params.orderState) {
        case '3':
          step = 0
          break
        case '4':
          step = 1
          break
        case '5':
          step = 2
          break
        case '6':
          step = 1
          break
        case '9':
          step = 3
          break
      }
      setStepData([
        {
          title: '生成订单',
          description: params.createTime,
        },
        {
          title: '已付款',
          description: params.payTime,
        },
        {
          title: '已发货',
          description: params.orderState === '5' ? <Space direction='vertical'>
            <span>{params.goodsGoTime}</span>
            <Button onClick={() => { logisticsDetail(data.shopOrderId) }}>查看物流</Button>
          </Space> : params.goodsGoTime
        },
        {
          title: '交易完成',
          description: params.orderState === '9' ? <Space direction='vertical'>
            <span>{params.finishTime}</span>
            <Button onClick={() => { logisticsDetail(data.shopOrderId) }}>查看物流</Button>
          </Space> : params.finishTime
        },
      ])
      setStepCurrentValue(step)
    }
  }
  // step交易关闭进度数据处理
  const getOffStep = (params) => {
    let stepCurrent = ''
    let stepValue = []
    if (params.orderState === '0') {
      switch (params.beforeEndOrderState) {
        case '3':
          stepCurrent = 1
          stepValue = [
            {
              title: '生成订单',
              description: params.createTime,
            },
            {
              title: '交易关闭',
              description: params.createTime,
            }
          ]
          break
        case '4':
          stepCurrent = 2
          stepValue = [
            {
              title: '生成订单',
              description: params.createTime,
            },
            {
              title: '已付款',
              description: params.createTime,
            },
            {
              title: '交易关闭',
              description: params.createTime,
            }
          ]
          break
        case '5':
          stepCurrent = 3
          stepValue = [
            {
              title: '生成订单',
              description: params.createTime,
            },
            {
              title: '已付款',
              description: params.createTime,
            },
            {
              title: '已发货',
              description: params.createTime,
            },
            {
              title: '交易关闭',
              description: (
                <Space direction='vertical'>
                  <span>{params.orderEndTime}</span>
                  <Button onClick={() => { logisticsDetail(data.shopOrderId) }}>查看物流</Button>
                </Space>
              ),
            }
          ]
          break
        case '9':
          stepCurrent = 4
          stepValue = [
            {
              title: '生成订单',
              description: params.createTime,
            },
            {
              title: '已付款',
              description: params.createTime,
            },
            {
              title: '已发货',
              description: params.createTime,
            },
            {
              title: '交易完成',
              description: params.createTime,
            },
            {
              title: '交易关闭',
              description: (
                <Space direction='vertical'>
                  <span>{params.orderEndTime}</span>
                  <Button onClick={() => { logisticsDetail(data.shopOrderId) }}>查看物流</Button>
                </Space>
              ),
            }
          ]
          break
      }
      setStepCurrentValue(stepCurrent)
      setStepData(stepValue)
    }
  }
  const logisticsDetail = async (shopOrderId) => {
    await getOrderLogisticsDetail(shopOrderId).then(res => {
      if (res.code === 0 && res.data) {
        let context = null
        if (res.data.msg) {

          context = res.data.msg.hasOwnProperty('context') ? res.data.msg.context.map(v => {
            let time = v.time * 1000
            time = new Date(parseInt(time))
            time = getDateTime2(time)
            return {
              ...v,
              time
            }
          }) : null
        }
        let courierCode = ""
        for (let i = 0; i < options.length; i++) {
          // console.log(options[i].value, res.data.courierCode);
          if (options[i].value === res.data.courierCode) {

            courierCode = options[i].label
          }
        }
        // console.log(courierCode);
        setLogisticsModal(true)
        setLogisticsData(context)
        setCourierCode(courierCode)
        setCourierNo(res.data.courierNo)
      }
    })
  }
  return (
    <div>
      <Paragraph>
        <blockquote>
          <Space size={30}>
            <span>订单号：{data.orderCode}</span>
            <span>下单时间：{data.createTime}</span>
            <span>{data.activityTypeCode}</span>
            <span style={{ color: 'red' }}>{data.commissionStatus}</span>
          </Space>
        </blockquote>
      </Paragraph>
      <Card>
        <Steps progressDot current={stepCurrentValue}>
          {
            stepData.map((item, index) => {
              return <Step title={item.title} subTitle={item.description} key={index} />
            })
          }
        </Steps>
      </Card>
      <Modal
        title={"跟踪物流"}
        open={logisticsModal}
        onCancel={() => { setLogisticsModal(false) }}
        onOk={() => { setLogisticsModal(false) }}
        cancelButtonProps={{ style: { display: "none" } }}
      >
        <p>快递公司：{courierCode}</p>
        <p>快递单号：{courierNo}</p>
        {
          logisticsData ? <Steps progressDot current={1} direction="vertical">
            {logisticsData.map((v, i) => {
              return <Step title={v.time} description={v.desc} key={i} />
            })}
          </Steps> : <p>暂无物流信息</p>
        }
      </Modal>
    </div>
  )
}


